<template>
  <div>
    <el-form ref="form" :model="form" label-width="150px" inline :rules="rule"> 
<!--  办理计划    -->
      <el-form-item label="货种：" v-if="keys.includes('form1') ||
       keys.includes('form3')"  prop="planBulkGoods.gtypecd">
        <el-select @change="re" clearable style="width: 220px" size="small"
                   v-model="form.planBulkGoods.gtypecd" placeholder="请选择货种" :disabled="!showEd" filterable>
          <el-option  :label="item.name" :value="item.type"  v-for="item,index in goodsList" :key="index">
            <div style="display: flex;justify-content: space-between">
              <div>{{item.type}}</div>
              <div>{{item.name}}</div>
            </div>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="货物名称：" v-if="keys.includes('form1') || keys.includes('form3')" prop="planBulkGoods.gname">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.gname" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="货物形态：" v-if="keys.includes('form1') || keys.includes('form3')"  prop="planBulkGoods.morphology">
<!--        <el-input :disabled="!showEd" size="small" type="text" v-model="form.desc"></el-input>-->
        <el-select disabled size="small" v-model="form.planBulkGoods.morphology"  style="width: 220px">
          <el-option checked label="件杂货" value="HWXT_JZH"></el-option>
          <el-option label="散货" value="HWXT_SZH"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="唛头：" v-if="keys.includes('form3')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.markerno" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="货物来源：" v-if="keys.includes('form1')">
        <el-input :disabled="!showEd" size="small" type="text" style="width: 220px" v-model="form.planBulkGoods.goodsFrom"></el-input>
      </el-form-item>
      <el-form-item label="委托重量（吨）：" v-if="keys.includes('form1') || keys.includes('form3')"  prop="planBulkGoods.planContainerGoods.gcentwg">
        <el-input-number  :disabled="!showEd"  size="small" :min="0" style="width: 220px"
                          v-model="form.planBulkGoods.planContainerGoods.gcentwg"  :step="0.01" step-strictly>
        </el-input-number>
      </el-form-item>
     
      <el-form-item label="货物流向：" v-if="keys.includes('form1')">
        <el-input :disabled="!showEd" size="small" type="text" style="width: 220px" v-model="form.planBulkGoods.goodsTo"></el-input>
      </el-form-item>

<!-- 生成计划 keys.includes('form2') || keys.includes('form4')-->
<!--      <el-form-item label="申请人：" v-if="keys.includes('form2') || keys.includes('form4')||keys.includes('form5')||keys.includes('form7')">
        <el-input :disabled="!showEd" disabled size="small" type="text" v-model="form.plansExt.createUser"></el-input>
      </el-form-item>-->
      <el-form-item label="作业码头：" v-if="keys.includes('form5')||keys.includes('form8')" style="padding: 0" prop="termCode">
        <el-select disabled @change="re" clearable style="width: 220px" size="small"
                   v-model="form.termCode" placeholder="请选择作业码头">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in tips" :key="index"></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="码头作业区：" v-if="keys.includes('form5')">
        <el-input disabled :disabled="!showEd" disabled size="small"
                  type="text" v-model="form.termCode">

        </el-input>
      </el-form-item>-->
<!--      <el-form-item label="返场作业区：" v-if="keys.includes('form5')" style="padding: 0" prop="termCode">
        <el-select @change="re" clearable style="width: 220px" size="small"
                   v-model="form.no1" placeholder="请选择返场作业区">
          <el-option  :label="item.value" :value="item.key"  v-for="item in tips"></el-option>
        </el-select>
      </el-form-item>-->
<!--  无字段    -->
      <el-form-item label="计划类型：" v-if="keys.includes('form5')||keys.includes('form8')" style="padding: 0" prop="termCode">
        <el-select disabled @change="re" clearable style="width: 220px" size="small"
                   v-model="form.planTag" placeholder="请选择结计划类型">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in planTagList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="返场码头：" v-if="keys.includes('form5')||keys.includes('form8')" style="padding: 0" prop="termCode">
        <el-select disabled @change="re" clearable style="width: 220px" size="small"
                   v-model="form.returnTermcd" placeholder="请选择返场码头">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in tips" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间：" v-if="keys.includes('form5')||keys.includes('form6')||keys.includes('form7')||keys.includes('form8')">
<!--        :disabled="!showEd"-->
        <el-date-picker
            :disabled="true"
            format="yyyy-MM-dd HH:mm:ss"
            @change="opsttm"
            v-model="form.opsttm"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间：" v-if="keys.includes('form5')||keys.includes('form6')||keys.includes('form7')||keys.includes('form8')">
        <el-date-picker
            :disabled="true"
            format="yyyy-MM-dd HH:mm:ss"
            @change="opsttm"
            v-model="form.opedtm"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结算方式："
                    v-if="keys.includes('form5')||keys.includes('form6')
                    ||keys.includes('form7')||keys.includes('form8')" style="padding: 0" prop="termCode">
        <el-select @change="re" clearable style="width: 220px" size="small"
                   v-model="form.payMode" placeholder="请选择结算方式" disabled>
          <el-option  :label="item.meaning" :value="item.lowValue"  v-for="item,index in dataList.SETTLEMODE" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款单位：" v-if="keys.includes('form5')||keys.includes('form6')||keys.includes('form7')
      ||keys.includes('form8')" style="padding: 0" prop="termCode">
        <el-select @change="re" clearable style="width: 220px" size="small"
                   v-model="form.payer" placeholder="请选择付款单位">
          <el-option  :label="item.name" :value="item.customerCode"  v-for="item,index in dataList.cstCoperListtomer" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="货主单位：" v-if="keys.includes('form5')||keys.includes('form6')
      ||keys.includes('form7')||keys.includes('form8')" style="padding: 0" prop="termCode">
        <el-select @change="re" clearable style="width: 220px" size="small"
                   v-model="form.consignor" placeholder="请选择货主单位">
          <el-option  :label="item.name" :value="item.customerCode"  v-for="item,index in dataList.consignor" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车队单位：" v-if="keys.includes('form5')||keys.includes('form6')
      ||keys.includes('form7')||keys.includes('form8')" style="padding: 0" prop="termCode">
        <el-select @change="re" clearable style="width: 220px" size="small"
                   v-model="form.cstTrnscomCd" placeholder="请选择车队单位">
          <el-option  :label="item.name" :value="item.customerCode"  v-for="item,index in dataList.cstTrnscomCd" :key="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="结算方式：" v-if="keys.includes('form2') || keys.includes('form4')">
        <!-- :disabled="!showEd" -->
        <el-select  v-model="form.payMode"  style="width: 220px" disabled>
          <el-option label="现金" value="XJ"></el-option>
          <el-option label="月结" value="ZD"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间：" v-if="keys.includes('form2') || keys.includes('form4')">
        <el-date-picker
            style="width: 220px"
            :disabled="!showEd"
            format="yyyy-MM-dd"
            @change="opsttm"
            v-model="form.opsttm"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="客户联系方式：" v-if="keys.includes('form2') || keys.includes('form4')">
        <el-input @input="re" :disabled="!showEd" size="small" type="text" v-model="form.customerPhone" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="船舶联系方式：" v-if="keys.includes('form2') || keys.includes('form4')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.vesselPhone" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="船舶名称：" v-if="keys.includes('form4')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.vslCd" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="流向：" v-if="keys.includes('form2')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.plansExt.moveTo" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="收货方：" v-if="keys.includes('form2') || keys.includes('form4')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.plansExt.recipient" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="发票抬头：" v-if="keys.includes('form5')||keys.includes('form6')||keys.includes('form7')||keys.includes('form8')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.title" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="备注：" v-if="keys.includes('form5')||keys.includes('form6')||keys.includes('form7')||keys.includes('form8')">
        <el-input :disabled="!showEd" size="small" type="text"
                  v-model="form.plansExt.createUser" style="width: 220px"></el-input>
      </el-form-item>

      <el-form-item label="委托数量：" v-if="keys.includes('form3')"  prop="planBulkGoods.planContainerGoods.gcentpks">
        <el-input-number  :disabled="!showEd" :min="0" style="width: 220px" size="small"
                          v-model="form.planBulkGoods.planContainerGoods.gcentpks"  :step="1" step-strictly>
        </el-input-number>
      </el-form-item>
      <el-form-item label="计量单位：" v-if="keys.includes('form3')" prop="planBulkGoods.gunit">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.gunit" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="包装方式：" v-if="keys.includes('form3')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.pktype" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="产地：" v-if="keys.includes('form3')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.origin" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="规格型号：" v-if="keys.includes('form3') || keys.includes('form1')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.spec1"  style="width: 220px"></el-input>
      </el-form-item>
      <!-- <el-form-item label="规格型号2：" v-if="keys.includes('form3')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.spec2" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="规格型号3：" v-if="keys.includes('form3')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.spec3" style="width: 220px"></el-input>
      </el-form-item> -->
      <el-form-item label="货物来源：" v-if="keys.includes('form3')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.goodsFrom"  style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="货物流向：" v-if="keys.includes('form3')">
        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planBulkGoods.goodsTo"  style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="备注：" v-if="keys.includes('form3') || keys.includes('form1')">
        <el-input :disabled="!showEd" size="small" type="textarea" v-model="form.planBulkGoods.remark"  style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="附件：" v-if="keys.includes('form5') || keys.includes('form7')">
          <upload-img ref="upLoad" @set="setFile"></upload-img>
<!--        <el-input :disabled="!showEd" size="small" type="text" v-model="form.planAttachmentList."></el-input>-->
      </el-form-item>
    </el-form>
    <div style="display: flex;align-content: space-around;justify-content: center" v-if="showEd">
      <el-button type="primary" class="sub" @click="sub">提交</el-button>
      <el-button class="cal" @click="cal">取消</el-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import uploadImg from "@/components/uploadImg";
export default {
  name: "formList",
  components:{
    uploadImg
  },
  data(){
    return{
      tips:[{key:'HX',value:'河西码头'},{key:'LTG',value:'龙头港'}],
      dataList:{
        sell:[],
        consignor:[],
        cstTrnscomCd:[],
        customer:[],
      },
      /*my_normalizer(node) {
        return {
          id: node.id,
          label: node.label,
          children: node.children,
          isDisabled: '' !== node.children
        };
      },*/
      goods:null,
      goodsType:[],
      goodsList:[],
      per:'',
      planTagList:[
        {key:'PFRE',value:'提重返空',},
        {key:'PERF_WC',value:'提空返重（指定箱号）',},
        {key:'PE_WC',value:'提空箱（指定箱号）',},
        {key:'PF',value:'提重箱',},
        {key:'BOX',value:'装箱',},
        {key:'UNBOX',value:'拆箱',}
      ],
      form:{
        payMode:'ZD',
        opsttm:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        opedtm:moment(new Date()).add(7,"days").format('YYYY-MM-DD HH:mm:ss'),
        plansExt:{
          createUser:'',
          recipient:'',
          billNo:'',
          moveTo:''
        },
        planBulkGoods:{
          receiverName:'',
          morphology:this.keys.includes('form1')?'HWXT_SZH':'HWXT_JZH',
          gtypecd:'',
          planContainerGoods:{},
          gname:'',
          gunit:'',
        },
        planContainerGoods:{
          gcentwg:'',
          gcentpks:''
        },
        isCheck:-1,
        billno:1
      },
      rule:{
        "planBulkGoods.gtypecd": [
            { required: true, message: '请选择货种', trigger: 'blur' }
          ],
          "planBulkGoods.gname": [
            { required: true, message: '请输入货物名称', trigger: 'blur' }
          ],
          "planBulkGoods.planContainerGoods.gcentwg": [
            { required: true, message: '请输入委托重量（吨）', trigger: 'blur' }
          ],
          "planBulkGoods.morphology": [
            { required: true, message: '请选择货物形态', trigger: 'blur' }
          ],
          "planBulkGoods.planContainerGoods.gcentpks": [
            { required: true, message: '请输入委托数量', trigger: 'blur' }
          ],
          "planBulkGoods.gunit": [
            { required: true, message: '请输入计量单位', trigger: 'blur' }
          ],
      }
    }
  },
  props:{
    showEd:{
      default: () => true
    },
    keys: {
      default: () => []
    },
  },
  watch:{
    keys(){
      //this.form.planBulkGoods.morphology=this.keys.includes('form1')?'HWXT_SZH':'HWXT_JZH'
    },
  },
  created() {
    this.getDateList()
  },
  methods:{
    setFile(res){
      console.log(999)
      console.log(res)
      this.form.planAttachmentList=res
    },
    re(){
      this.$forceUpdate()
    },
    formatToTree(ary, pid) {
      return ary
          .filter((item) =>
              // 如果没有父id（第一次递归的时候）将所有父级查询出来
              // 这里认为 item.parentId === 1 就是最顶层 需要根据业务调整
              pid === undefined ? item.parentType === null : item.parentType === pid
          )
          .map((item) => {
            // 通过父节点ID查询所有子节点
            item.children = this.formatToTree(ary, item.type);
            return item;
          });
    },
    ch(e){
      console.log(e)
      this.goodsList.forEach(item=>{
        if(item.id===e){
          this.form.planBulkGoods.gtypecd=item.type
        }
      })

    },
    getGoods(){
      console.log(88888)
      this.$api.getGoodsType().then(res=>{
        console.log(res.data)
        this.goodsList=res.data
      }).catch()
    },
    getDateList(){
      this.$api.refCode({
        domain:'SETTLEMODE'
      }).then(res=>{
        this.dataList.SETTLEMODE=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.customer().then(res=>{
        this.dataList.cstCoperListtomer=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.customerByType({
        tenantTypeName:'货主'
      }).then(res=>{
        this.dataList.consignor=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.customerByType({
        tenantTypeName:'运输公司'
      }).then(res=>{
        this.dataList.cstTrnscomCd=res.data.data
        this.$forceUpdate()
      }).catch()
      /*this.$api.customerByType({
        tenantTypeName:'码头'
      }).then(res=>{
        this.dataList.tips=res.data.data
      }).catch()*/

      console.log(localStorage.getItem('userInfo'))
      this.$forceUpdate()
    },
    /*getGoods(){
      console.log(88888)
      this.$api.QueryDataStandard({
        module:'goods_type',
        page:{
          orderItems:'type',
          current:0,
          size:999
        }
      }).then(res=>{
        console.log(res.data)
        this.goodsList=res.data
        //this.$forceUpdate()
      }).catch()
    },*/
    /*getGoods(){
      console.log(88888)
      this.$api.getGoodsType().then(res=>{
        console.log(res.data)
        this.goodsList=res.data
        let a=this.formatToTree(res.data)
        console.log(999999)
        let tree = JSON.stringify(a)
        tree=tree.replace(/name/g,'label')
        tree=tree.replace(/\[\]/g,'\"\"')
        //console.log(JSON.parse(tree))
        this.goodsType=JSON.parse(tree)
        console.log(this.goodsType)
        if(''!==this.form.planBulkGoods.gtypecd){
          this.goodsList.forEach(item=>{
            if(item.type===this.form.planBulkGoods.gtypecd){
              this.goods=item.id
            }
          })
        }else{
          this.goods=null
        }
        this.$forceUpdate()
      }).catch()
    },*/
    opsttm(e){
      console.log(e)
      this.form.opsttm=moment(this.form.opsttm).format('YYYY-MM-DD HH:mm:ss')
    },
    cal(){
      this.$emit('cal')
    },
    sub(){
      this.$emit('sub')
    },
    onSubmit(){

    },
  },
}
</script>

<style scoped lang="less">
.sub{
  background: #043AA7;
  border-radius: 4px;
}
.cal{
  background: #F9F7F7;
  color: #666;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
}
</style>
